<template>
    <div>
        <div class="toplist">
            <div class="item" v-for="(item,index) in lists" :key="index" >
                <router-link :to="{path:'/ranklist',query:{id:item.id}}">
                <div class="img">
                    <img :src="item.coverImgUrl" alt="">
                </div>
                <ul>
                    <li v-for="(key,i) in item.tracks" :key="i" v-show="i<3">
                        {{i+1}}.{{key.name}} - {{key.ar[0].name}}
                        </li>                   
                </ul>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
import { getToplist , getToplistdetail } from "../api/rank";
export default {
    data() {
        return {
            lists:[]
        }
    },
    beforeRouteEnter (to, from, next) {
        // 第一种写法，页面渲染前获取数据
        getToplist().then(data=>{
            next(vm=>vm.getToplistdetailFun(data.list))
        })
    },
    methods: {
        getToplistdetailFun(list){
            // console.log(list);
            for(let i = 1;i < list.length;i++){               
                let id = list[i].id;
                getToplistdetail({id}).then(data=>{
                    // console.log(data);
                    this.lists.push(data.playlist);
                })
                
            }
            console.log(this.lists);
        }
    },
    mounted() {
        
    },
}

</script>
<style lang="less">
.toplist{
    margin-top: 5px;
    .item{
        height: 90px;
        margin: 0px 8px;
        padding: 2px 0px;
        border-bottom: 1px solid #E1E2E2;
        a{
            display: flex;
            .img{
                flex: 0 0 90px;
                margin-right: 18px;
                background-color: chocolate;
                width: 90px;
                height: 90px;
                border-radius: 2px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            ul{
                flex: 1;
                height: 90px;
                margin-top: 4px;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                li{
                    font-size: 14px;
                    flex: 1;
                    
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>